<template>
  <div class="student-management">
    <!-- 页面标题和操作区 -->
    <div class="header-section">
      <h1 class="page-title">
        <i class="el-icon-s-custom title-icon"></i>
        学生信息管理系统
      </h1>
      <div class="action-buttons">
        <el-button 
          type="primary" 
          icon="el-icon-plus" 
          @click="showAddDialog"
          class="add-btn"
          round
        >
          新增学生
        </el-button>
        <el-button 
          type="success" 
          icon="el-icon-download" 
          @click="handleExport"
          plain
          round
        >
          导出数据
        </el-button>
      </div>
    </div>

    <!-- 搜索筛选区 -->
    <el-card class="search-card" shadow="never">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="姓名" prop="name">
          <el-input 
            v-model="searchForm.name" 
            placeholder="请输入姓名" 
            clearable
            prefix-icon="el-icon-user"
            @clear="handleSearch"
            class="search-input"
          />
        </el-form-item>
        <el-form-item label="学号" prop="xuehao">
          <el-input 
            v-model="searchForm.xuehao" 
            placeholder="请输入学号" 
            clearable
            prefix-icon="el-icon-tickets"
            @clear="handleSearch"
            class="search-input"
          />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select 
            v-model="searchForm.gender" 
            placeholder="全部性别"
            clearable
            @change="handleSearch"
            class="gender-select"
          >
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button 
            type="primary" 
            icon="el-icon-search" 
            @click="handleSearch"
            class="search-btn"
          >
            搜索
          </el-button>
          <el-button 
            icon="el-icon-refresh-left" 
            @click="handleReset"
            class="reset-btn"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据表格区 -->
    <el-card class="table-card" shadow="never">
      <el-table
        :data="paginatedData"
        style="width: 100%"
        class="student-table"
        stripe
        border
        v-loading="loading"
        element-loading-text="数据加载中..."
        element-loading-spinner="el-icon-loading"
        empty-text="暂无数据"
        @sort-change="handleSortChange"
      >
        <el-table-column
          prop="id"
          label="ID"
          width="90"
          align="center"
          sortable
          header-align="center"
        />
        <el-table-column
          prop="name"
          label="姓名"
          width="120"
          align="center"
          sortable
          header-align="center"
        />
        <el-table-column
          prop="xuehao"
          label="学号"
          width="160"
          align="center"
          sortable
          header-align="center"
        />
        <el-table-column
          prop="gender"
          label="性别"
          width="100"
          align="center"
          header-align="center"
        >
          <template slot-scope="scope">
            <el-tag 
              :type="scope.row.gender === '男' ? 'primary' : 'danger'"
              effect="dark"
              size="medium"
            >
              {{ scope.row.gender }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="220"
          align="center"
          
          header-align="center"
        >
          <template slot-scope="scope">
            <el-tooltip content="查看详情" placement="top">
              <el-button 
                @click="handleView(scope.row)" 
                type="text" 
                size="small"
                icon="el-icon-view"
                class="action-btn view-btn"
              ></el-button>
            </el-tooltip>
            <el-tooltip content="编辑信息" placement="top">
              <el-button 
                @click="handleEdit(scope.row)" 
                type="text" 
                size="small"
                icon="el-icon-edit"
                class="action-btn edit-btn"
              ></el-button>
            </el-tooltip>
            <el-tooltip content="删除记录" placement="top">
              <el-button 
                @click="handleDelete(scope.row)" 
                type="text" 
                size="small"
                icon="el-icon-delete"
                class="action-btn delete-btn"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页控件 -->
      <div class="pagination-wrapper">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="filteredData.length"
          background
        />
      </div>
    </el-card>

    <!-- 新增/编辑学生对话框 -->
    <el-dialog 
      :title="dialogTitle" 
      :visible.sync="dialogVisible" 
      width="500px"
      @closed="resetForm"
      :close-on-click-modal="false"
      custom-class="student-dialog"
    >
      <el-form 
        :model="formData" 
        :rules="formRules" 
        ref="formRef"
        label-width="80px"
      >
        <el-form-item label="姓名" prop="name">
          <el-input 
            v-model="formData.name" 
            placeholder="请输入姓名"
            clearable
            prefix-icon="el-icon-user"
          ></el-input>
        </el-form-item>
        <el-form-item label="学号" prop="xuehao">
          <el-input 
            v-model="formData.xuehao" 
            placeholder="请输入学号"
            clearable
            prefix-icon="el-icon-tickets"
            :disabled="isEdit"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="formData.gender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="cancel-btn">取 消</el-button>
        <el-button 
          type="primary" 
          @click="submitForm"
          :loading="submitLoading"
          class="confirm-btn"
        >确 定</el-button>
      </span>
    </el-dialog>

    <!-- 学生详情对话框 -->
    <el-dialog 
      title="学生详情" 
      :visible.sync="detailDialogVisible" 
      width="500px"
      custom-class="detail-dialog"
    >
      <el-descriptions :column="1" border>
        <el-descriptions-item label="ID" label-class-name="desc-label">
          <el-tag size="small">{{ currentStudent.id }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="姓名" label-class-name="desc-label">
          {{ currentStudent.name }}
        </el-descriptions-item>
        <el-descriptions-item label="学号" label-class-name="desc-label">
          {{ currentStudent.xuehao }}
        </el-descriptions-item>
        <el-descriptions-item label="性别" label-class-name="desc-label">
          <el-tag 
            :type="currentStudent.gender === '男' ? 'primary' : 'danger'"
            effect="dark"
            size="medium"
          >
            {{ currentStudent.gender }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false" class="close-btn">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'StudentManagement',
  data() {
    return {
      // 分页相关
      currentPage: 1,
      pageSize: 10,
      loading: false,
      
      // 搜索表单
      searchForm: {
        name: '',
        xuehao: '',
        gender: ''
      },
      
      // 对话框相关
      dialogVisible: false,
      detailDialogVisible: false,
      dialogTitle: '新增学生',
      isEdit: false,
      submitLoading: false,
      
      // 表单数据
      formData: {
        id: '',
        name: '',
        xuehao: '',
        gender: '男'
      },
      
      // 表单验证规则
      formRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        xuehao: [
          { required: true, message: '请输入学号', trigger: 'blur' },
          { pattern: /^\d{10}$/, message: '学号必须是10位数字', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ]
      },
      
      // 当前查看的学生
      currentStudent: {},
      
      // 完整的学生数据
      tableData: [
        { id: '1', name: '钟嘉盈', xuehao: '2370600101', gender: '女' },
        { id: '2', name: '卢小霞', xuehao: '2370600102', gender: '女' },
        { id: '3', name: '李志鹏', xuehao: '2370600103', gender: '男' },
        { id: '4', name: '林秋婷', xuehao: '2370600104', gender: '女' },
        { id: '5', name: '叶碧倩', xuehao: '2370600105', gender: '女' },
        { id: '6', name: '吴嘉茵', xuehao: '2370600106', gender: '女' },
        { id: '7', name: '黄嘉宜', xuehao: '2370600107', gender: '女' },
        { id: '8', name: '张家伦', xuehao: '2370600108', gender: '男' },
        { id: '9', name: '张惠', xuehao: '2370600109', gender: '女' },
        { id: '10', name: '张欣', xuehao: '2370600110', gender: '女' },
        { id: '11', name: '黄荣森', xuehao: '2370600111', gender: '男' },
        { id: '12', name: '覃善毅', xuehao: '2370600112', gender: '男' },
        { id: '13', name: '杨迎', xuehao: '2370600113', gender: '女' },
        { id: '14', name: '黄博熠', xuehao: '2370600114', gender: '男' },
        { id: '15', name: '苏小勇', xuehao: '2370600115', gender: '男' },
        { id: '16', name: '程铭友', xuehao: '2370600116', gender: '男' },
        { id: '17', name: '蔡耿城', xuehao: '2370600117', gender: '男' },
        { id: '18', name: '梁国晓', xuehao: '2370600118', gender: '男' },
        { id: '19', name: '吴泽权', xuehao: '2370600119', gender: '男' },
        { id: '20', name: '蔡景财', xuehao: '2370600120', gender: '男' },
        { id: '21', name: '陈川', xuehao: '2370600121', gender: '男' },
        { id: '22', name: '柯锦辉', xuehao: '2370600122', gender: '男' },
        { id: '23', name: '黄婉纯', xuehao: '2370600123', gender: '女' },
        { id: '24', name: '金立群', xuehao: '2370600124', gender: '男' },
        { id: '25', name: '邓丽红', xuehao: '2370600125', gender: '女' },
        { id: '26', name: '黄勇', xuehao: '2370600126', gender: '男' },
        { id: '27', name: '李建浩', xuehao: '2370600127', gender: '男' },
        { id: '28', name: '赵颖毅', xuehao: '2370600128', gender: '男' },
        { id: '29', name: '朱泽炜', xuehao: '2370600129', gender: '男' },
        { id: '30', name: '贺志鹏', xuehao: '2370600130', gender: '男' },
        { id: '31', name: '陈海丽', xuehao: '2370600131', gender: '女' },
        { id: '32', name: '陈荧霞', xuehao: '2370600132', gender: '女' },
        { id: '33', name: '刘海鹏', xuehao: '2370600133', gender: '男' },
        { id: '34', name: '秦菲雪', xuehao: '2370600134', gender: '女' },
        { id: '35', name: '秦思懿', xuehao: '2370600135', gender: '女' },
        { id: '36', name: '赵俊逸', xuehao: '2370600136', gender: '男' },
        { id: '37', name: '曾昊天', xuehao: '2370600137', gender: '男' },
        { id: '38', name: '李瑾玉', xuehao: '2370600138', gender: '女' },
        { id: '39', name: '张壹', xuehao: '2370600139', gender: '男' },
        { id: '40', name: '李彬', xuehao: '2370600140', gender: '男' },
        { id: '41', name: '吴迪', xuehao: '2370600141', gender: '男' },
        { id: '42', name: '刘胜', xuehao: '2370600142', gender: '男' },
        { id: '43', name: '罗俊健', xuehao: '2370600143', gender: '男' },
        { id: '44', name: '周森', xuehao: '2370600144', gender: '男' },
        { id: '45', name: '余桂侨', xuehao: '2370600145', gender: '女' },
        { id: '46', name: '叶华林', xuehao: '2370600146', gender: '男' },
        { id: '47', name: '陈紫娟', xuehao: '2370600147', gender: '女' },
        { id: '48', name: '黄绍潞', xuehao: '2370600148', gender: '男' }
      ]
    }
  },
  computed: {
    // 过滤后的数据
    filteredData() {
      return this.tableData.filter(item => {
        const nameMatch = item.name.includes(this.searchForm.name)
        const xuehaoMatch = item.xuehao.includes(this.searchForm.xuehao)
        const genderMatch = this.searchForm.gender ? item.gender === this.searchForm.gender : true
        return nameMatch && xuehaoMatch && genderMatch
      })
    },
    // 分页数据
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.filteredData.slice(start, end)
    }
  },
  methods: {
    // 显示新增对话框
    showAddDialog() {
      this.dialogTitle = '新增学生'
      this.isEdit = false
      this.dialogVisible = true
    },
    
    // 重置表单
    resetForm() {
      this.$refs.formRef?.resetFields()
      this.formData = {
        id: '',
        name: '',
        xuehao: '',
        gender: '男'
      }
    },
    
    // 提交表单
    submitForm() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.submitLoading = true
          
          // 模拟异步操作
          setTimeout(() => {
            if (this.isEdit) {
              // 编辑现有学生
              const index = this.tableData.findIndex(item => item.id === this.formData.id)
              if (index !== -1) {
                this.tableData.splice(index, 1, {...this.formData})
                this.$message.success('修改成功')
              }
            } else {
              // 新增学生
              const maxId = Math.max(...this.tableData.map(item => parseInt(item.id)))
              const newStudent = {
                id: String(maxId + 1),
                ...this.formData
              }
              this.tableData.unshift(newStudent)
              this.$message.success('添加成功')
              this.currentPage = 1
            }
            
            this.dialogVisible = false
            this.submitLoading = false
          }, 800)
        }
      })
    },
    
    // 查询
    handleSearch() {
      this.currentPage = 1
      this.$message.success('查询成功')
    },
    
    // 重置查询
    handleReset() {
      this.searchForm = {
        name: '',
        xuehao: '',
        gender: ''
      }
      this.currentPage = 1
    },
    
    // 查看详情
    handleView(row) {
      this.currentStudent = {...row}
      this.detailDialogVisible = true
    },
    
    // 编辑学生
    handleEdit(row) {
      this.dialogTitle = '编辑学生'
      this.isEdit = true
      this.formData = {...row}
      this.dialogVisible = true
    },
    
    // 删除学生
    handleDelete(row) {
      this.$confirm(`确定要删除学生 ${row.name} 吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            // 模拟异步删除
            setTimeout(() => {
              const index = this.tableData.findIndex(item => item.id === row.id)
              if (index !== -1) {
                this.tableData.splice(index, 1)
                this.$message.success('删除成功')
                // 如果当前页没有数据了，且不是第一页，则返回上一页
                if (this.paginatedData.length === 0 && this.currentPage > 1) {
                  this.currentPage -= 1
                }
              }
              done()
              instance.confirmButtonLoading = false
            }, 800)
          } else {
            done()
          }
        }
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    
    // 导出数据
    handleExport() {
      this.$confirm('确定要导出当前数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        this.loading = true
        // 模拟导出操作
        setTimeout(() => {
          this.loading = false
          this.$message.success('导出成功')
        }, 1500)
      }).catch(() => {
        this.$message.info('已取消导出')
      })
    },
    
    // 排序
    handleSortChange({ column, prop, order }) {
      if (order) {
        this.tableData.sort((a, b) => {
          if (order === 'ascending') {
            return a[prop] > b[prop] ? 1 : -1
          } else {
            return a[prop] < b[prop] ? 1 : -1
          }
        })
      } else {
        // 恢复默认排序
        this.tableData.sort((a, b) => parseInt(a.id) - parseInt(b.id))
      }
    },
    
    // 分页大小改变
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
    },
    
    // 当前页改变
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>

<style lang="scss">
.student-management {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 40px);
  
  .header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .page-title {
      color: #303133;
      font-size: 24px;
      font-weight: 500;
      display: flex;
      align-items: center;
      margin: 0;
      
      .title-icon {
        margin-right: 10px;
        color: #409EFF;
      }
    }
    
    .action-buttons {
      .add-btn {
        background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
        border: none;
        box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
      }
    }
  }
  
  .search-card {
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid #ebeef5;
    
    .search-form {
      padding: 15px 0;
      
      .el-form-item {
        margin-bottom: 0;
        margin-right: 15px;
        
        .search-input {
          width: 200px;
        }
        
        .gender-select {
          width: 120px;
        }
      }
      
      .search-btn {
        background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
        border: none;
        box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
      }
      
      .reset-btn {
        border-color: #dcdfe6;
      }
    }
  }
  
  .table-card {
    border-radius: 8px;
    border: 1px solid #ebeef5;
    
    .student-table {
      th {
        background-color: #f8fafc !important;
        font-weight: bold;
        color: #606266;
      }
      
      .el-table__body-wrapper {
        tr:hover > td {
          background-color: #f5f9ff !important;
        }
        
        .action-btn {
          padding: 5px;
          font-size: 16px;
          transition: all 0.3s;
          
          &.view-btn:hover {
            color: #409EFF;
            transform: scale(1.2);
          }
          
          &.edit-btn:hover {
            color: #67C23A;
            transform: scale(1.2);
          }
          
          &.delete-btn:hover {
            color: #F56C6C;
            transform: scale(1.2);
          }
        }
      }
    }
    
    .pagination-wrapper {
      padding: 20px 0 10px;
      display: flex;
      justify-content: flex-start;
      //text-align: left;
    }
  }
  
  .student-dialog {
    border-radius: 8px;
    
    .el-dialog__header {
      border-bottom: 1px solid #ebeef5;
      padding: 15px 20px;
      
      .el-dialog__title {
        font-size: 18px;
        font-weight: 500;
        color: #303133;
      }
    }
    
    .el-dialog__body {
      padding: 20px;
    }
    
    .el-dialog__footer {
      border-top: 1px solid #ebeef5;
      padding: 15px 20px;
      
      .cancel-btn {
        border-color: #dcdfe6;
      }
      
      .confirm-btn {
        background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
        border: none;
        box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
      }
    }
  }
  
  .detail-dialog {
    border-radius: 8px;
    
    .el-dialog__header {
      border-bottom: 1px solid #ebeef5;
      padding: 15px 20px;
      
      .el-dialog__title {
        font-size: 18px;
        font-weight: 500;
        color: #303133;
      }
    }
    
    .el-dialog__body {
      padding: 20px;
      
      .desc-label {
        width: 100px;
        text-align: right;
        font-weight: bold;
        color: #606266;
      }
    }
    
    .el-dialog__footer {
      border-top: 1px solid #ebeef5;
      padding: 15px 20px;
      
      .close-btn {
        background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
        border: none;
        box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
      }
    }
  }
}

@media (max-width: 992px) {
  .student-management {
    padding: 15px;
    
    .header-section {
      flex-direction: column;
      align-items: flex-start;
      
      .action-buttons {
        margin-top: 15px;
      }
    }
    
    .search-card {
      .search-form {
        .el-form-item {
          margin-right: 10px;
          margin-bottom: 10px;
          
          .search-input {
            width: 160px;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .student-management {
    padding: 10px;
    
    .header-section {
      .page-title {
        font-size: 20px;
      }
    }
    
    .search-card {
      .search-form {
        .el-form-item {
          margin-right: 5px;
          margin-bottom: 5px;
          width: 100%;
          
          .search-input, .gender-select {
            width: 100%;
          }
        }
      }
    }
    
    .table-card {
      .student-table {
        font-size: 12px;
        
        th, td {
          padding: 8px 0 !important;
        }
      }
    }
  }
}
</style>